<template>
  <div class="page" align="center">
    <div class="loginCard">
      <div class="loginForm">
        <div style="padding-top: 60px;text-align: left">
          <el-row>
            <div align="center">
              <img
                src="../../assets/wap/login/dengluicon.png"
                style="height: 30%;width: 40%"
              />
            </div>
          </el-row>
          <el-row>
            <div style="padding-top: 40px">
              <el-form :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item prop="username" laber="用户账号">
                  <el-input
                    v-model="loginForm.username"
                    placeholder="演示系统，请输入任意账号"
                    type="text"
                    maxlength="20"
                    @input="usernameInput"
                  >
                    <i slot="prefix" class="el-input-icon el-icon-user"></i>
                  </el-input>
                </el-form-item>
                <el-form-item
                  prop="password"
                  laber="用户密码"
                  style="padding-top:40px"
                >
                  <el-input
                    v-model="loginForm.password"
                    placeholder="演示系统，请输入任意密码"
                    maxlength="16"
                    type="password"
                    @input="passwordInput"
                    @keyup.enter.native="clickLogin('loginForm')"
                  >
                    <i
                      slot="prefix"
                      class="el-input-icon el-icon-shopping-bag-2"
                    ></i>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-row>
          <el-row>
            <div style="padding-top: 40px">
              <el-col :span="12">
                <div>
                  <el-checkbox
                    label="记住密码"
                    v-model="loginForm.checked"
                  ></el-checkbox>
                </div>
              </el-col>
              <el-col :span="12">
                <!--<div>-->
                <!--<button class="forgetPassword" @click="forgetPassword()">-->
                <!--忘记密码-->
                <!--</button>-->
                <!--</div>-->
              </el-col>
            </div>
          </el-row>
          <el-row>
            <div style="padding-top: 60px">
              <button @click="clickLogin('loginForm')" class="btn-login">
                登录
              </button>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: null,
        password: null,
        checked: true
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户账号不能为空",
            trigger: "blur"
          },
          {
            max: 20,
            min: 1,
            message: "用户账户长度限制1-20个字符以内",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "用户密码不能为空",
            trigger: "blur"
          },
          {
            max: 16,
            min: 1,
            message: "用户密码长度限制6-16个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.getCookies();
  },
  methods: {
    setCookies(username, password) {
      this.$cookies.set("username", username, "20d");
      this.$cookies.set("password", password, "20d");
      this.$cookies.set("remember", true, "20d");
    },
    getCookies() {
      if (this.$cookies.get("remember")) {
        this.loginForm.username = this.$cookies.get("username");
      }
    },
    removeCookies() {
      this.$cookies.remove("username");
      this.$cookies.remove("password");
      this.$cookies.remove("remember");
    },
    clickLogin(loginForm) {
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          let url = "/rtc/login";
          let params = {
            userName: this.loginForm.username
          };
          params.password = this.$getMD5(this.loginForm.password);
          this.axios.hPost(url, params, response => {
            if (response.status === 200) {
              this.$message.success("登录成功");
              if (this.loginForm.checked) {
                this.setCookies(
                        this.loginForm.username,
                        this.$getMD5(this.loginForm.password),
                );
              } else {
                this.removeCookies();
              }
              this.$store.dispatch("UserLogin", {
                realName: response.data.realName,
                sender: response.data.sender,
                username: this.loginForm.username,
                companyId: response.data.companyId
              });
              this.$router.push({
                name: "mHome"
              });
              console.log(response);
            } else {
              this.$message.error(response.msg);
            }
          });
        } else {
          console.log("测试");
        }
      });
    },
    forgetPassword() {
      console.log("忘记密码");
    },
    // 工具
    usernameInput(val) {
      let codeReg = new RegExp("[A-Za-z0-9]+"), //正则 英文+数字；
        len = val.length,
        str = "";
      for (let i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.loginForm.username = str;
      this.loginForm.password = null;
    },
    passwordInput(val) {
      let codeReg = new RegExp("[A-Za-z0-9]+"), //正则 英文+数字；
        len = val.length,
        str = "";
      for (let i = 0; i < len; i++) {
        if (codeReg.test(val[i])) {
          str += val[i];
        }
      }
      this.loginForm.password = str;
    },
    repeat(str, num) {
      return new Array(num + 1).join(str);
    }
  }
};
</script>

<style scoped>
.page {
  /*background: url("../../assets/login/beijing.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loginCard {
  width: calc(100% - 2rem);

  /*margin-top: 150px;*/
  /*background: url("../assets/login/chahuadi.png") no-repeat;*/
  /*background-size: 100% 100%;*/
}
.loginForm {
  /*margin-left: 360px;*/
  width: 300px;
}
.forgetPassword {
  border: none;
  background-color: #fff;
  color: #606266;
}
.forgetPassword:hover {
  color: #000000;
}
.btn-login {
  border: none;
  width: 300px;
  background-image: url("../../assets/login/denglu.png");
  height: 40px;
  border-radius: 4px;
  font-size: 20px;
  color: #ffffff;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2),
    2px 2px 2px 2px rgba(0, 0, 0, 0.19);
}
.btn-login:hover {
  background-image: url("../../assets/login/denglu1.png");
}
</style>
